<template>
    <div>
        <el-menu mode="horizontal">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-menu-item index="2" style="float:right;" v-if="!user">
                <el-button type="primary" @click="login">登录</el-button>
            </el-menu-item>
            <el-submenu index="3" style="float:right;" v-else>
                <template slot="title">{{user}}</template>
                <el-menu-item index="3-1" @click="signout">退出</el-menu-item>
            </el-submenu>
    
        </el-menu>
        <el-row>
            <el-col :span="2">
                <div>
                    &nbsp;
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <router-link to="/">首页</router-link>
                    <router-link to="login">login</router-link>
                    <router-link to="register">register</router-link>
                    <router-link to="article_add">add</router-link>
                </div>
            </el-col>
            <el-col :span="16">
                <div>
                    <router-view></router-view>
                </div>
            </el-col>
        </el-row>
    
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: ''
        }
    },
    methods: {
        login() {
            location.href = '#login';
        },
        signout() {
            sessionStorage.removeItem('username');
            this.getUser();

        },
        getUser() {
            let user = sessionStorage.getItem('username');
            this.user = user;
        }
    },
    mounted() {
        this.getUser();
    }
}
</script>
